<template>
    <view class="patientList mt16">
        <view @click="selectPatient(item._id, item.name)" class="card patientItem ml16 mr16 mt16"
            v-for="item in patientListArr">
            <view class="patientName">
                <text>{{ item.name }}</text>
                <text>{{ item.relation }}</text>
            </view>
            <view class="patientDetail mt16">
                <text>{{ item.sex }}</text>
                <text>{{ item.age }}</text>
                <text>{{ item.phone }}</text>
            </view>
        </view>

    </view>

    <view class="ft">
        <view>取消</view>
        <view @click="addPatientBtn">添加就诊人</view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { get_patientApi } from '@/http/api'
import type { PatientItem } from '@/dataType/data'
import { patientStore } from '@/store/patient'

const store = patientStore();



onMounted(() => {
    getPatientList()
})

//定义就诊人列表数组
const patientListArr = ref<PatientItem[]>([])
//拉取就诊人列表
const getPatientList = async () => {
    //调用就诊人列表接口
    const res = await get_patientApi()
    console.log('就诊人列表:', res)
    patientListArr.value = res.data.data
}

//点击选择就诊人,将信息添加到pinia，并回退上一个页面
const selectPatient = (id: string, name: string) => {
    store.addPatient({
        name,
        id
    })

    uni.navigateBack({
        delta: 1,
    })


}

//点击打开添加就诊人页面
const addPatientBtn = () => {
    uni.navigateTo({
        url: '/pages/patient/addPatient'
    })
}

</script>

<style lang="scss">
@import "@/assets/style/public.scss";

page {
    background: #f7f7f7;
}

.patientItem {
    view {
        &.patientName {
            text:nth-of-type(2) {
                background: #dcf2fc;
                padding: 10rpx;
                color: #7ec1e0;

            }
        }

        text {
            margin: 10rpx;
        }
    }
}
</style>